<template>
  <div class="page-header-index-wide">
    <a-card title="组织架构图" :bordered="false" style="padding: 10px" :body-style="{ padding: '0' }">
      <vo-basic :data="chartData"></vo-basic>
    </a-card>
  </div>
</template>

<script>
import { VoBasic } from 'vue-orgchart'
export default {
  components: { VoBasic },
  data() {
    return {
      chartData: [],
    }
  },
  created() {
    this.chartData = {
      name: '董事会',
      children: [
        {
          name: '总经理',
          children: [
            { name: '营销中心', children: [{ name: '市场部' }, { name: '销售部' }, { name: '售后部' }] },
            {
              name: '项目中心',
              children: [{ name: '售前支持部' }, { name: '项目一部' }, { name: '项目二部' }, { name: '项目三部' }],
            },
            { name: '技术中心', children: [{ name: '开发部' }, { name: '设计部' }, { name: '系统部' }] },
            { name: '行政部' },
            { name: '财务部' },
            { name: '其他分支', children: [{ name: '汕头分公司' }] },
          ],
        },
      ],
    }
  },
}
</script>

<style lang="less" scoped>
/deep/ .orgchart .node {
    width: auto;
}
/deep/ .orgchart .node .title {
  padding: 0 25px;
  height: 35px;
  line-height: 35px;
}
</style>